/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <!-- 底部横幅 -->
  <div
    class="bottom-container"
    :style="{
      bottom: bottomAvoidArea ? bottomAvoidArea + 'px' : '15px',
    }"
  >
    <div class="song-img-info">
      <img
        :src="require('../../../assets/playList/cover.png')"
        class="album-cover"
      />
      <div class="song-info">
        <div class="song-title">{{ song.title }}</div>
        <div class="song-artist">{{ song.artist }}</div>
      </div>
    </div>

    <div style="flex: 1"></div>
    <div :class="{ 'all-icon': isLargerPage }">
      <div
        ref="iconContainer"
        data-priority-status="true"
        :style="{
          'flex-direction': 'row',
          'justify-content': 'space-between',
          'align-items': 'center',
          display: 'flex',
          height: '48px',
          width: displayPriorityBoxWidth + 'px',
          left: displayPriorityBoxLeft + 'px',
        }"
      >
        <div
          v-for="(icon, index) in icons"
          :key="index"
          :data-display-priority="icon.priority"
          class="icon-container"
        >
          <img
            :src="require('../../../assets/playList/' + icon.source)"
            :style="icon.style"
          />
        </div>
      </div>
    </div>
    <img
      v-if="isLargerPage"
      :src="require('../../../assets/playList/love_icon.svg')"
      style="width: 24px; height: 24px"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import {
  DisplayPriorityLayout,
  BreakpointManager,
} from '@hadss/web_adaptive_layout_ui';
import { defineProps } from 'vue';

const props = defineProps({
  song: {
    type: Object,
    required: true,
  },
  bottomAvoidArea: {
    type: Number,
    default: 0,
  },
});

// 图标之间的间距
const iconSpace = ref(0);

// 图标
const icons = ref([
  {
    priority: 1,
    source: 'play_mode.png',
    style: { width: '24px', height: '24px' },
  },
  {
    priority: 1,
    source: 'control_left.png',
    style: {
      width: '28px',
      height: '28px',
      right: iconSpace.value + 'px',
    },
  },
  {
    priority: 10,
    source: 'play_icon.png',
    style: { width: '24px', height: '24px' },
  },
  {
    priority: 1,
    source: 'control_right.png',
    style: { width: '28px', height: '28px', left: iconSpace.value + 'px' },
  },
  {
    priority: 10,
    source: 'play_list_icon.png',
    style: { width: '24px', height: '24px' },
  },
]);

// 显示和隐藏对象
const displayPriorityLayout = ref<DisplayPriorityLayout | null>(null);
const iconContainer = ref<HTMLElement | null>(null);

// 断点对象
const breakpointManager = new BreakpointManager();
const unsubscribe = ref<(() => void) | null>(null);

// 横幅中所有的图标的总宽度.用于显示和隐藏
const displayPriorityBoxWidth = ref(0);
// 横幅中所有的图标的距离边距
const displayPriorityBoxLeft = ref(0);
//是否是pad以及是否比pad屏幕要大
const isLargerPage = ref(false);

onMounted(() => {
  // 显示和隐藏
  if (iconContainer.value) {
    displayPriorityLayout.value = new DisplayPriorityLayout(
      iconContainer.value
    );
    displayPriorityLayout.value.initializeLayout();
  }

  // 断点
  unsubscribe.value = breakpointManager.subscribeToBreakpoint(() => {
    displayPriorityBoxWidth.value = breakpointManager.useBreakpointValue({
      xs: 70,
      sm: 70,
      md: 212,
      lg: 310,
      xl: 310,
    });
    displayPriorityBoxLeft.value = breakpointManager.useBreakpointValue({
      xs: 0,
      sm: 0,
      md: 0,
      lg: -350,
      xl: -600,
    });
    isLargerPage.value = breakpointManager.useBreakpointValue({
      md: false,
      lg: true,
    });
    iconSpace.value = breakpointManager.useBreakpointValue({
      md: 0,
      lg: 20,
    });

    // 使用新的间距更新图标样式
    icons.value[1].style.right = iconSpace.value + 'px';
    icons.value[3].style.left = iconSpace.value + 'px';
  });
});

onBeforeUnmount(() => {
  // 销毁显隐对象
  displayPriorityLayout.value?.destroy();
  // 销毁断点对象
  if (unsubscribe.value) {
    unsubscribe.value();
  }
});
</script>

<style scoped>
.bottom-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 8px;
  height: 48px;
  background-color: rgb(241, 243, 245);
  padding-right: 20px;
  margin-left: 8px;
  margin-right: 8px;
  position: fixed;
  width: -webkit-fill-available;
}

.album-cover {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  margin-left: 8px;
}

.song-img-info {
  display: flex;
  text-align: justify;
}

.song-info {
  width: max-content;
  margin-left: 8px;
}

.song-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.9);
}

.song-artist {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
  line-height: 13px;
}

.icon-container {
  align-items: center;
  width: 25px;
}

.all-icon {
  width: 100%;
  justify-items: center;
}
</style>
